<template>
  <footer id="foot" class="">
      <ul class="footer">
        <li :class="{'footer-active':tab=='Tab1'}" @click="_tab('Tab1')"><i><img v-show="tab=='Tab1'" src="../assets/icon/HomeChoice@2x.png" alt=""><img v-show="tab!='Tab1'" src="../assets/icon/Home@2x.png" alt=""></i><br/><span>Home</span></li>
        <li :class="{'footer-active':tab=='Tab2'}" @click="_tab('Tab2')"><i><img v-show="tab=='Tab2'" src="../assets/icon/OpportunityChoice@2x.png" alt=""><img v-show="tab!='Tab2'" src="../assets/icon/Opportunity@2x.png" alt=""></i><br/><span>Tab2</span></li>
        <li :class="{'footer-active':tab=='Tab3'}" @click="_tab('Tab3')"><i><img v-show="tab=='Tab3'" src="../assets/icon/ActivityChoice@2x.png" alt=""><img v-show="tab!='Tab3'" src="../assets/icon/Activity@2x.png" alt=""></i><br/><span>Tab3</span></li>
        <li :class="{'footer-active':tab=='Tab4'}" @click="_tab('Tab4')"><i><img v-show="tab=='Tab4'" src="../assets/icon/DashboardChoice@2x.png" alt=""><img v-show="tab!='Tab4'" src="../assets/icon/Dashboard@2x.png" alt=""></i><br/><span>User</span></li>
      </ul>
  </footer>
</template>

<script>
  export default {
    name: 'foot',
    data() {
      return {
        tab: 'Tab1'
      }
    },
    mounted() {

    },
    methods: {
      _tab(e){
        this.tab = e;

        switch (e){
          case 'Tab1':
            this.$router.push('/home');
            break;
          case 'Tab2':
            //this.$router.push('/');
            break;
          case 'Tab3':
            //this.$router.push('/');
            break;
          case 'Tab4':
            this.$router.push('/user');
            break;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

 .footer{
   position: fixed;
   left: 0;
   bottom: 0;
   z-index: 999;
   display: flex;
   flex-direction: row;
   width: 100%;
   height: .52rem;
   line-height: .12rem;
   font-size: .12rem;
   background-color: #FFF;
   border-top: 1px solid #DDD;
 }

 .footer li{
    width: 10rem;
    height: 10rem;
    text-align: center;
 }

 .footer li i{
   display: inline-block;
   width: .24rem;
   height: .24rem;
   margin: .07rem 0 .03rem 0;
 }

 .footer li span{
   line-height: .1rem;
 }

 .footer li img{
   width: 100%;
   height: 100%;
 }

  .footer-active span{
    color: #0a8ddf;
  }

 /*移动端根据设备分辨率缩小线宽*/
 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
   .footer {
     border-width: 0.5px;
   }
 }
 @media only screen and (-webkit-min-device-pixel-ratio: 3) {
   .footer {
     border-width: 0.33px;
   }
 }
</style>
